<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2023-12-22 16:38:03
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2023-12-28 17:30:03
 * @FilePath: \zxi-surface-guide\src\components\BaseVideo\BaseVideo.vue
 * @Description: 由于视频都存在本地 所以没有使用动态路由的方式实现该组件
 -->
<script setup lang="ts">
import { PmFrameKey } from "~/BaseFrame";
import { inject, onMounted, ref, watch } from "vue";

const props = defineProps<{
  videoUrl: string;
}>();

const videoRef = ref<HTMLVideoElement>();

const root = inject(PmFrameKey)!;

function onPlay() {
  root.showDrawer.value = false;
}

function isFullscreen() {
  if (!videoRef.value) return false;
  return window.document.fullscreenElement === videoRef.value;
}

onMounted(() => {
  videoRef.value!.src = props.videoUrl;
  videoRef.value!.addEventListener("play", onPlay);
  videoRef.value!.addEventListener("fullscreenchange", () => {
    if (!isFullscreen()) {
      videoRef.value?.pause()
      root.videoReset();
    }
  });
});

watch(
  () => props.videoUrl,
  (url) => {
    if (url) {
      videoRef.value!.src = url;
      videoRef.value!.play();
      videoRef.value!.requestFullscreen();
    }
  }
);
</script>

<template>
  <div class="BaseVideo">
    <video
      ref="videoRef"
      controlslist="nodownload"
      disablepictureinpicture
      controls
      class="video"
    >
      <source type="video/mp4" />
    </video>
  </div>
</template>

<style lang="less" scoped>
.BaseVideo {
  // flex: auto;
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  position: absolute;
  // padding: 0.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  .pm-test-header {
    display: flex;
    gap: 0.5rem;
  }
  .video {
    position: absolute;
    // flex: auto;
    width: 100%;
    height: 100%;
  }
}
</style>
